<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd({})" v-action:addtypebtn2>新建一级分类</a-button>
        <!-- <a-button type="primary" icon="plus" @click="handleAdd('two')" v-action:addyunbtn2>新建二级分类</a-button>
        <a-button type="primary" icon="plus" @click="handleAdd('three')" v-action:addyunbtn2>新建三级分类</a-button> -->
      </div>
      
      <a-table
        ref="table"
        :loading="confirmLoading"
        :columns="columns"
        :data-source="CategoryData"
        :expanded-row-keys.sync="expandedRowKeys"
        :defaultExpandAllRows="true"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="name" slot-scope="text, record, index">
          <span :style="{color: record.level==1?'#FF6600':record.level==2?'#5d8bf5':'#00c500',marginLeft: record.level==1?'0px':record.level==2?'60px':'120px'}">{{ text }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-action:addtypebtn2 @click="handleAdd(record)" v-if="record.level<=2" :style="{color: record.level==1?'#FF6600':record.level==2?'#5d8bf5':'#00c500'}">添加{{record.level==1?'二':record.level==2?'三':''}}级分类</a>
            <!-- <a @click="handleAdd(record)" v-if="">添加三级分类</a> -->
            <a-divider type="vertical" v-if="record.level<=2"/>
            <a v-action:edittypebtn2 @click="handleEdit(record)" :style="{color: record.level==1?'#FF6600':record.level==2?'#5d8bf5':'#00c500'}">修改</a>
            <a-divider type="vertical"/>
            <a-popconfirm
              v-action:deltypebtn2
              title="确定删除这个数据吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm(record)"
              @cancel="cancel(record)"
            >
              <a :style="{color: record.level==1?'#FF6600':record.level==2?'#5d8bf5':'#00c500'}">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </a-table>

      <create-form
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      />
    </a-card>
  </page-header-wrapper>
</template>

<script>
// import { STable } from '@/components'
// import { getTeacher, addTeacher, delTeacher } from '@/api/system'

import CreateForm from './modules/CreateForm'

const columns = [
  {
    title: '编号',
    scopedSlots: { customRender: 'serial' },
    // align:'center',
    width: '80px'
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    width: '100px',
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: '100px',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '160px',
    scopedSlots: { customRender: 'action' }
  }
]
const dataList = {
  'data': [
    {
      id:1,
      name: '天使同城'
    },
    {
      id:2,
      name: '乐活游'
    },
    {
      id:3,
      name: '智游宝'
    },
  ],
  'pageSize': 10,
  'pageNo': 0,
  'totalPage': 6,
  'totalCount': 57
}

const data = [
  {
    key: 1,
    name: '一级目录',
    sort:1,
    children: [
      {
        key: 11,
        name: '二级目录',
        sort:2,
      },
      {
        key: 12,
        name: '二级目录',
        sort:1,
        children: [
          {
            key: 121,
            name: '3级目录',
            sort:1,
          },
        ],
      },
      {
        key: 13,
        name: '二级目录',
        sort:1,
        children: [
          {
            key: 131,
            name: '3级目录',
            sort:1,
            children: [
              {
                key: 1311,
                name: '4级目录',
                sort:1,
              },
              {
                key: 1312,
                name: '4级目录',
                sort:1,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: '1级目录',
    sort:1,
  },
];
export default {
  name: 'typeList',
  components: {
    // STable,
    CreateForm,
  },
  data () {

    // this.columns = columns
    return {
      operatorType:'',
      record:'',
      CategoryData:[],
      columns,
      expandedRowKeys: [],
      visibles: false,
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return new Promise((res, rej) => {
          res()
        }).then(res => {
          return dataList
        })
        // return getTeacher(requestParameters)
        //   .then(res => {
        //     return res.data
        //   })
      },
    }
  },
  created() {
    this.getCategoryRecursions()
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  mounted() {
  },
  methods: {
    handleAdd (record) {
      this.operatorType = 'add'
      console.log('handleAdd__record',record)
      this.mdl = {...record}
      this.mdl.name = ''
      this.mdl.sort = ''
      if(record.level){
        this.mdl.pid = record.id
        console.log("this.mdl__level",this.mdl.pid)
      }
      this.visible = true
    },
    handleEdit (record) {
      console.log('handleEdit__record',record)
      this.operatorType = 'edit'
      this.visible = true
      this.mdl = { ...record }
    },
    getCategoryRecursions() {
      this.confirmLoading = true
      const params = {
        
      }
      this.$productApi.CategoryRecursions(params).then(res => {
        if( res.ret == 200 ) {
          this.confirmLoading = false
          this.CategoryData = res.data == '未查询到数据'?[]:res.data
        }
      }).finally(error => {
        this.confirmLoading = false
      })
    },
    // 创建
    handleOk () {
      const form = this.$refs.createModal.form
      form.validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoading = true
          console.log('values', values)
          console.log('operatorType__handleOk', this.operatorType)
          if (this.operatorType=='edit') {
            // 修改 e.g.
            
          } else if (this.operatorType=='add') {
            // 新增
            delete values.id
            values.level = this.mdl.level?(this.mdl.level+1):1
            values.pid = this.mdl.pid
            console.log("values.pid",values.pid)
          }
          console.log("values_add",values)
          this.$productApi.CategorySave(values).then(res => {
            if( res.ret == 200 ) {
              this.visible = false
              this.confirmLoading = false
              // 刷新表格
              this.getCategoryRecursions()
              this.$message.success('操作成功')
            }
          }).finally(error => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
     // 删除
    confirm(e) {
      const form = this.$refs.createModal.form
      console.log(e);
      this.$productApi.CategoryDel({id: e.id}).then(res => {
        // 重置表单数据
        // form.resetFields()
        // 刷新表格
        this.getCategoryRecursions()
        // this.$refs.table.refresh()
        this.$message.success('删除成功');
        
      }).catch(error => {
        console.log('-------------error------------', error)
      })
    },
    cancel(e) {
      console.log(e);
      this.$message.error('已取消');
    },
    handleCancel () {
      this.visible = false

      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 重置
    reset () {
      const form = this.$refs.createModal.form
      this.queryParam = {}
        // 重置表单数据
      form.resetFields()
      // 刷新表格
      // this.$refs.table.refresh()
    },
  },
}
</script>
<style scoped>
/* 文字溢出隐藏并显示省略号 */
.textfont{
  width: 200px;
  height: 40px;
  /* height: 100%; */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 设置行数 */
	-webkit-box-orient:vertical;
}
</style>
